<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="/pear/component/pear/css/pear.css" />
	<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
</head>
<style>
</style>
<body class="pear-container">
<div class="layui-row layui-col-space10">
	<div class="layui-col-md12">
		<div class="layui-card">
			<div class="layui-card">
				<div class="layui-card-body" style="padding-top: 40px;">
					<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
						<div carousel-item>
							<div>
								<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
									<div class="layui-form-item">
										<label class="layui-form-label">用户名:</label>
										<div class="layui-input-block">
											<input type="text" readonly autocomplete="off" value="Tom" id="customerName" class="layui-input" />

										</div>
									</div>

									<div class="layui-form-item">
										<label class="layui-form-label">服务类型</label>
										<div class="layui-input-block">
											<select name="serviceType" id="serviceType" lay-verify="required">
												<option value=""></option>
												<option value="上门作业">上门作业</option>
												<option value="在线咨询">在线咨询</option>
												<option value="电话沟通">电话沟通</option>
											</select>
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">选择日期</label>
										<div class="layui-input-block">
											<input type="text"lay-verify="required" id="serviceDate" class="layui-input" autocomplete="off">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">备注说明:</label>
										<div class="layui-input-block">
											<textarea placeholder="服务备注" value="" id="Note" class="layui-textarea"></textarea>
										</div>
									</div>
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep" >
												&emsp;下一步&emsp;
											</button>
										</div>
									</div>
								</form>
							</div>
							<div>
								<form class="layui-form"  action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
									<div class="layui-form-item">
										<label class="layui-form-label">用户名:</label>
										<div class="layui-input-block">
										<div class="layui-form-mid layui-word-aux" id="userName_check"></div>
									</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">服务类型:</label>
										<div class="layui-input-block">
											<div class="layui-form-mid layui-word-aux" id="serviceType_check"></div>
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">选择日期:</label>
										<div class="layui-input-block">
											<div class="layui-form-mid layui-word-aux">
												<span style="font-size: 18px;color: #333;" id="calender_check"></span>
											</div>
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">备注说明:</label>
										<div class="layui-input-block">
											<div class="layui-form-mid layui-word-aux" id="content_check"></div>
										</div>
									</div>

									<div class="layui-form-item">
										<div class="layui-input-block">
											<button type="button" class="pear-btn pear-btn-success pre">上一步</button>
											<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
												&emsp;确认提交&emsp;
											</button>
										</div>
									</div>
								</form>
							</div>
							<div>
								<div style="text-align: center;margin-top: 90px;">
									<i class="layui-icon layui-circle" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
									<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
										申请成功
									</div>
									<div style="font-size: 14px;color: #666;margin-top: 20px;">预计今日处理</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>
<script src="/pear/component/layui/layui.js"></script>
<script src="/pear/component/pear/pear.js"></script>
<script>
	layui.use(['form', 'step','code','element','laydate'], function() {
		var $ = layui.$,
				form = layui.form,
				step = layui.step,
				laydate = layui.laydate;
		laydate.render({
			elem: '#serviceDate'
		});
		layui.code();

		step.render({
			elem: '#stepForm',
			filter: 'stepForm',
			width: '100%',
			stepWidth: '600px',
			height: '500px',
			stepItems: [{
				title: '填写'
			}, {
				title: '确认'
			}, {
				title: '完成'
			}]
		});

		var customerName = document.getElementById("customerName").value;
		var email = null;
		var address = null;
		//获取用户的地址和邮箱
		$(function () {

			//发送Ajax获取用户邮箱，地址
			$.ajax({
				url:'/apply/askEmailAddress',
				data:{"customerName":customerName},
				success:function (data) {
					console.log("获取到邮件和地址，打印如下：");
					console.log(data);
					email = data.Listinfo[0].email;
					address = data.Listinfo[0].address;
					customerName = data.Listinfo[0].userName;
					console.log(email);
					console.log(address);
					console.log(customerName);
					console.log("以上是邮件和地址");
				}
			})
		})

		form.on('submit(formStep)', function(data) {
			step.next('#stepForm');
			// 确认界面 只是把数据再显示一遍
			var userName = $('#customerName').val();
			var serviceType = $('#serviceType').val();
			var calender = $('#serviceDate').val();
			var content = $('#Note').val();

			$('#userName_check').html(userName);
			$('#serviceType_check').html(serviceType);
			$('#calender_check').html(calender);
			$('#content_check').html(content);
			return false;
		});

		form.on('submit(formStep2)', function(data) {
			step.next('#stepForm');

			// 这里写与后台交互的代码
			//获取用户的申请信息
			var userName = $('#customerName').val();
			var serviceType = $('#serviceType').val();
			var calender = $('#serviceDate').val();
			var content = $('#Note').val();


			//插入记录，，包括邮件和地址
			$.ajax({
				url:'/insert/deal',
				data:{"customerName":userName,"serviceType":serviceType,"serviceDate":calender,
					"Note":content, "email":email, "address":address},
				success:function (data) {
					console.log(data);
				}
			})
		});

		$('.pre').click(function() {
			step.pre('#stepForm');
			return false;
		});

		$('.next').click(function() {
			step.next('#stepForm');
			return false;
		});
	})
</script>
</body>
</html>
